<script setup lang="ts">
// import { FlowDesign } from '../../../lib/flow_design/lowflow-design.js';
// import '../../../lib/flow_design/style.css'
import { getFlowField, getObj as getMetaEntity } from '/@/api/admin/metaEntity';
import { queryList as queryUserList } from '/@/api/admin/user';
import { deptRoleList as queryRoleList } from '/@/api/admin/role';
import { deployment, getFlowJson, getFlowVersion, updateFlowVersion } from '/@/api/flow/flow';
import { useMessage, useMessageBox } from '/@/hooks/message';
// 流程节点
import router from '/@/router';

const loading = ref(true);
const entityId = router.currentRoute.value.query.entityId;

const versionValue = ref('');
const versionOptions = ref([]);

if (entityId == undefined) {
	window.location.reload();
}
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const process = ref({
	id: 'root',
	pid: undefined,
	type: 'start',
	name: '发起人',
	executionListeners: [],
	formProperties: [],
	child: {
		id: 'end',
		pid: 'root',
		type: 'end',
		name: '流程结束',
		executionListeners: [],
		child: undefined,
	} as EndNode,
} as StartNode);

let entity = {};

const getFlowByVersion = (version?) => {
	loading.value = true;
	getFlowJson(entity.flowKey, { version: version }).then((res) => {
		if (res.data) {
			process.value = res.data;
		}
		loading.value = false;
	});
};

const getVersion = () => {
	getFlowVersion(entity.flowKey).then((res) => {
		versionOptions.value = [];
		versionValue.value = res.data.useVersion;
		res.data.versionList.forEach((item) => {
			versionOptions.value.push({
				label: '版本' + item,
				value: item,
			});
		});
	});
}


const flushEntity = ()=> {
	getMetaEntity({ id: entityId }).then((res) => {
		entity = res.data[0];
		getFlowByVersion();
		getVersion();
	});
}
flushEntity()

// 表单字段
const fields = ref<[]>([
	{
		id: 'field_da2w55',
		type: 'formItem',
		label: '请假人',
		name: 'ElDatePicker',
		value: null,
	},
]);
getFlowField(entityId).then((res) => {
	fields.value = res.data.data;
});
// 是否只读
const readOnly = ref(false);
// 是否暗黑模式
const isDark = ref(false);
const converterBpmn = () => {
	loading.value = true;
	const processModel = {
		entityId: entityId,
		process: process.value,
	};
	console.log(processModel);
	deployment(processModel).then((res) => {
		if (res.code == 0) {
			useMessage().success('流程保存成功');
		}
		loading.value = false;
		flushEntity()
		// router.back();
	});
	// console.log(JSON.stringify(processModel));
};
let userList = [];
queryUserList([]).then((res) => {
	userList = res.data.map((item) => {
		return {
			id: item.userId,
			name: item.name,
			username: item.username,
			avatar: item.avatar,
		};
	});
	// console.log(res.data);
});
let roleList = [];
queryRoleList().then((res) => {
	roleList = res.data.map((item) => {
		return {
			id: item.roleId,
			name: item.roleName,
		};
	});
});

const getUserList = (ids?: string[]) => {
	return ids === undefined
		? userList
		: userList.filter((s) => {
				return ids.indexOf(s.id) != -1;
			});
};
const getUserInfo = (id?: string) => {
	return userList.find((user) => user.id === id);
};

const getRoleById = (roleId?: string) => {
	return roleList.find((role) => role.id === roleId);
};

const getRoleList = (roleIds?: string[]) => {
	return roleIds === undefined
		? roleList
		: roleList.filter((s) => {
				return roleIds.indexOf(s.id) != -1;
			});
};

const switchVersion = () => {
	updateFlowVersion(entity.flowKey, versionValue.value).then((res) => {
		if (res.code == 0) {
			useMessage().success("切换成功");
		}else {
			useMessage().error("切换失败")
		}
	})
};
</script>

<template>
	<flow-design
		v-loading="loading"
		:element-loading-svg="svg"
		element-loading-svg-view-box="-10, -10, 50, 50"
		style="position: fixed; z-index: 4; left: 0; top: 0; background: var(--el-bg-color)"
		:process="process"
		:fields="fields"
		:readOnly="readOnly"
		:getUserList="getUserList"
		:getUserInfo="getUserInfo"
		:getRoleList="getRoleList"
		:getRoleById="getRoleById"
		:currentNode="[]"
	>
		<el-switch v-model="readOnly" active-text="只读模式" inactive-text="编辑模式" inline-prompt :active-value="true" :inactive-value="false" />
		<el-button-group style="display: flex; align-items: center">
			<el-button @click="converterBpmn" type="primary" icon="FolderAdd"> 保存</el-button>
			<el-button @click="router.back()" type="primary" icon="Back"> 返回</el-button>

			<el-text class="mx-1" type="success" style="margin-left: 2vw">版本管理</el-text>
			<el-select @change="getFlowByVersion" v-model="versionValue" placeholder="版本管理" style="width: 100px; margin-left: 0.5vw">
				<el-option v-for="item in versionOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<el-button @click="switchVersion" icon="Switch" plain style="margin-left: 0.5vw"> 切换版本</el-button>
		</el-button-group>
	</flow-design>
</template>

<style scoped lang="scss"></style>
